import React, {Component} from 'react';

class Navbar extends Component {
    render() {
        return (<div>
            <button onClick={this.props.showSidebar}>click</button>
            <span style={{marginLeft: '20px'}}>Navbar</span>
        </div>)
    }
}

class Sidebar extends Component {
    render() {
        return (<div>
            <ul style={{backgroundColor: 'yellow', width: '30%'}}>
                <li>1111111111111</li>
                <li>1111111111111</li>
                <li>1111111111111</li>
                <li>1111111111111</li>
                <li>1111111111111</li>
                <li>1111111111111</li>
                <li>1111111111111</li>
            </ul>
        </div>)
    }
}

class App extends Component {
    state = {
        isShow: true
    }
    render() {
        return (<div>
            <Navbar showSidebar={() => this.setState({isShow: !this.state.isShow})} />
            {this.state.isShow ? <Sidebar /> : null}
        </div>);
    }
}

export default App;